<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>章节修改页面</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<!-- 新增编辑课程View-->
<div>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form " action="" lay-filter="deptInfo" style="width: 700px;margin-top: 10px">
            <input name="id" hidden/>
            <input name="courseId" hidden>
            <input name="video" hidden>
            <div class="layui-form-item">
                <label class="layui-form-label">章节名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" placeholder="章节名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">视频地址</label>
                <div class="layui-input-block">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>拖拽上传</legend>
                    </fieldset>

                    <div class="layui-upload-drag" id="test10">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>
                    <div id="uploadDemoView">
                        <hr>
                        <ul style="list-style-type:circle">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" placeholder="排序" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存
                    </button>
                    <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script>
    layui.use(['jquery', 'layer', 'form', 'upload'], function () {

            let fileTemplateCreate = function (res) {
                return `
                <li>
                            <span>${res.data.title}</span>
                            <button class="layui-btn layui-btn-danger delete" data="res.data.title">删除</button>
                </li>`
            }
            let $ = layui.jquery
            let upload = layui.upload
            let form = layui.form
            let videoList = []

            // 章节id
            let chapterId = CoreUtil.getUrlParam("chapterId");

            // 课程id
            let courseId = CoreUtil.getUrlParam("courseId");

            let showFile = (res) => {
                videoList.push({
                    title: res.data.title,
                    src: res.data.src
                })
                console.log(videoList)
                layui.$('#uploadDemoView').find('ul').append(
                    fileTemplateCreate(res)
                )
                // 绑定删除事件
                $('.delete').on('click', function (item) {
                    let title = $(item.target).parent().children("span").text();
                    console.log(title)
                    videoList = videoList.filter(video => {
                        return !video.title === title
                    })
                    item.stopPropagation()
                    $(item.target).parent().remove()
                });
            }

            //拖拽上传
            upload.render({
                elem: '#test10'
                , accept: 'file' //普通文件
                , url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                , done: function (res) {
                    layer.msg('上传成功');
                    showFile(res);
                }
            });

            // 加载数据
            let loadChapterInfo = function (chapterId) {
                // 设置课程id
                $("input[name=courseId]").val(courseId)
                // 是编辑并且章节id不为空，加载章节信息
                if (chapterId !== undefined && chapterId !== null) {
                    CoreUtil.sendAjax(`/study/chapter/info/${chapterId}`, null, function (res) {
                        $("input[name=id]").val(res.id)
                        $("input[name=sort]").val(res.sort)
                        $("input[name=name]").val(res.name)
                        $("input[name=video]").val(res.video)
                        showFile({
                            data: {
                                title: res.name,
                                src: res.video
                            }
                        })
                        form.render();
                    }, "GET", false, function (res) {
                        //用户列表接口无权限回调
                        layer.msg("抱歉！您暂无获取用户列表的权限");
                    });
                }
                form.render();
            }

            loadChapterInfo(chapterId)

            // 关闭页面
            const close = () => {
                const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.location.reload();
                parent.layer.close(index);
            };

            $("#btn_cancel").click(close)


            //监听提交 新增和编辑  保存按钮
            form.on('submit(submit)', function (data) {
                let listElement = videoList[0];
                if (listElement != null) {
                    data.field.video =  listElement.src
                }
                //新增
                if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                    CoreUtil.sendAjax("/study/chapter", JSON.stringify({...data.field}), function (res) {
                        // 关闭
                        layer.msg("章节信息保存成功！")
                        close()
                    }, "POST", false, function (res) {
                        //新增课程无权限提示
                        layer.msg("抱歉！您暂无新增课程的权限");
                    });
                }
                return false;
            });

        }
    )
</script>
</html>